Rewrite devices dashboard page in react #6489
Conversation
Cloudflare Pages deployment
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| accessorFn: row => parseISO8601Date(row.DateLastActivity), | ||
| header: globalize.translate('LabelTime'), | ||
| size: 160, | ||
| Cell: ({ cell }) => toLocaleString(cell.getValue<Date>()), |
There was a problem hiding this comment.
Would toLocaleDateString with getDisplayTime be more readable? (example)
There was a problem hiding this comment.
I think we should just use standard approaches for displaying the date time... I did switch to using date-fns though since eventually we should replace the custom date formatting stuff.
There was a problem hiding this comment.
Just a personal suggestion, but we could consider removing the seconds part in favor of easier comprehension at a glance.
| ...DEFAULT_TABLE_OPTIONS, | ||
|
|
||
| columns, | ||
| data: devices?.Items || [], |
There was a problem hiding this comment.
When you are tabbed out for a while and come back to the page or when deleting/editing a device, react query will re-render the data causing the table state (current page, filters, etc) to reset.
We might be able to fix this by adding autoResetPageIndex: isRefetching (have not tried).
This likely affects other tables as well.
| // Enable custom features | ||
| enableColumnPinning: true, | ||
| enableColumnResizing: true, | ||
|
|
||
| // Sticky header/footer | ||
| enableStickyFooter: true, | ||
| enableStickyHeader: true, | ||
| muiTableContainerProps: { | ||
| sx: { | ||
| maxHeight: 'calc(100% - 7rem)' // 2 x 3.5rem for header and footer | ||
| } | ||
| }, | ||
|
|
There was a problem hiding this comment.
Should we do this refactor for the api keys page as well? 😅
I'm also alright with doing it in another PR.
There was a problem hiding this comment.
Yes. It didn't exist when I started this and I didn't want to make the PR bigger. 😅
|
Changes
Rewrites the devices dashboard page in react using the table pattern
Issues
N/A